<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />
    <title>History</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 12px;
      }
      h1 {
        margin: 0 0 15px 0;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      a {
        display: block;
        padding: 16px 8px;
      }
      a:link,
      a:visited {
        text-decoration: none;
        color: blue;
      }
      a:hover {
        background-color: #eee;
      }
      li {
        display: flex;
        margin: 15px 0;
      }
      li strong,
      li code,
      li button {
        white-space: nowrap;
        flex: 1;
        margin: 0 5px;
      }
      iframe {
        width: 100%;
        height: 36px;
        border: none;
      }
    </style>
    <script>
      partytown = {
        logCalls: true,
        logGetters: true,
        logSetters: true,
        logStackTraces: false,
        logScriptExecution: true,
      };
    </script>
    <script src="/~partytown/debug/partytown.js"></script>
  </head>
  <body>
    <h1>History</h1>
    <ul>
      <li>
        <strong>window.history === history</strong>
        <code id="testWinEquals"></code>
        <script type="text/partytown">
          (function () {
            const equals = history === window.history;
            const elm = document.getElementById('testWinEquals');
            elm.textContent = String(equals);
          })();
        </script>
      </li>

      <li>
        <strong>pushState(88, '')</strong>
        <code id="testPushStateStr"></code>
        <script type="text/partytown">
          (function () {
            history.pushState(88, '');
            const elm = document.getElementById('testPushStateStr');
            elm.textContent = JSON.stringify(history.state);
          })();
        </script>
      </li>

      <li>
        <strong>pushState({ mph: 88 })</strong>
        <button id="buttonPushState">/history/</button>
        <code id="testPushStateObj"></code>
        <code id="testPushStateUrl"></code>
        <script type="text/partytown">
          (function () {
            const buttonPushState = document.getElementById('buttonPushState');
            buttonPushState.addEventListener('click', () => {
              history.pushState({ mph: 88 }, '', '/tests/platform/history/push-state');
              const elm = document.getElementById('testPushStateObj');
              elm.textContent = JSON.stringify(history.state);

              setTimeout(() => {
                const url = document.getElementById('testPushStateUrl');
                url.textContent = location.pathname;
                url.className = 'testPushStateUrl';
              }, 30);
            });
          })();
        </script>
      </li>

      <li>
        <strong>back()</strong>
        <button id="buttonGoBack">Go Back</button>
        <code id="testGoBack"></code>
        <script type="text/javascript">
          (function () {
            const buttonGoBack = document.getElementById('buttonGoBack');
            buttonGoBack.addEventListener('click', () => {
              history.back();

              setTimeout(() => {
                const elm = document.getElementById('testGoBack');
                elm.textContent = location.pathname;
                elm.className = 'testGoBack';
              }, 30);
            });
          })();
        </script>
      </li>

      <li>
        <strong>forward()</strong>
        <button id="buttonGoForward">Go Forward</button>
        <code id="testGoForward"></code>
        <script type="text/javascript">
          (function () {
            const buttonGoForward = document.getElementById('buttonGoForward');
            buttonGoForward.addEventListener('click', () => {
              history.forward();

              setTimeout(() => {
                const elm = document.getElementById('testGoForward');
                elm.textContent = location.pathname;
                elm.className = 'testGoForward';
              }, 30);
            });
          })();
        </script>
      </li>

      <li>
        <strong>replaceState()</strong>
        <button id="buttonReplaceState121">/history/1.21gw</button>
        <button id="buttonReplaceState">/history/</button>
        <code id="testReplaceState"></code>
        <code id="testReplaceStateUrl"></code>
        <script type="text/partytown">
          (function () {
            const buttonReplaceState121 = document.getElementById('buttonReplaceState121');
            buttonReplaceState121.addEventListener('click', () => {
              history.pushState({ year: 1955 }, '', '/tests/platform/history/1.21gw');
              document.getElementById('testReplaceState').textContent = history.state.year;

              setTimeout(() => {
                const url = document.getElementById('testReplaceStateUrl');
                url.textContent = location.pathname;
                url.className = 'testReplaceStateUrl';
              }, 30);
            });

            const buttonReplaceState = document.getElementById('buttonReplaceState');
            buttonReplaceState.addEventListener('click', () => {
              history.replaceState({ year: 1985 }, '', '/tests/platform/history/');
              document.getElementById('testReplaceState').textContent = history.state.year;
            });
          })();
        </script>
      </li>

      <li>
        <strong>patch pushState()</strong>
        <button id="buttonPatchPushState">patch</button>
        <code id="testPatchPushState"></code>
        <script type="text/partytown">
          (function () {
            const buttonPatchPushState = document.getElementById('buttonPatchPushState');
            buttonPatchPushState.addEventListener('click', () => {
              const originalPushState = history.pushState.bind(history);
              history.pushState = function (data, title, url) {
                document.getElementById('testPatchPushState').textContent = data + ' Valley';
                originalPushState(data, title, url);
              };
              history.pushState('Hill', '');
            });
          })();
        </script>
      </li>

      <li>
        <strong>iframe replaceState()</strong>
        <button id="buttonIframeReplaceState">replaceState</button>
        <code id="testIframeReplaceState"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testIframeReplaceState');

            const iframe = document.createElement('iframe');
            iframe.src = 'iframe-history.html';
            elm.parentNode.appendChild(iframe);

            const buttonIframeReplaceState = document.getElementById('buttonIframeReplaceState');
            buttonIframeReplaceState.addEventListener('click', () => {
              iframe.contentWindow.history.replaceState('88', '');
              elm.textContent = iframe.contentWindow.history.state;
            });
          })();
        </script>
      </li>

      <li>
        <strong>main pushState</strong>
        <button id="buttonMainPushState">main pushState</button>
        <code id="testMainPushStateEcho"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testMainPushStateEcho');

            const originalPushState = history.pushState.bind(history);

            history.pushState = function(state, _, url) {
              console.log('[debug]', state, _, url);
              originalPushState(state, _, url);
              elm.textContent = JSON.stringify({ state, url });
            }
          })();
        </script>
        <script type="text/javascript">
          (function () {
            const buttonMainPushState = document.getElementById('buttonMainPushState');
            buttonMainPushState.addEventListener('click', () => {
              console.log('[debug] history pushState =', history.pushState)
              history.pushState(42, '', '/tests/platform/history/pushed-state');
            });
          })();
        </script>
      </li>

      <li>
        <strong>main replaceState</strong>
        <button id="buttonMainReplaceState">main replaceState</button>
        <code id="testMainReplaceStateEcho"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testMainReplaceStateEcho');

            const originalReplaceState = history.replaceState.bind(history);
            history.replaceState = function(state, _, url) {
              originalReplaceState(state, _, url);
              elm.textContent = JSON.stringify({ state, url });
            }
          })();
        </script>
        <script type="text/javascript">
          (function () {
            const buttonMainReplaceState = document.getElementById('buttonMainReplaceState');

            buttonMainReplaceState.addEventListener('click', () => {
              history.replaceState(23, '', '/tests/platform/history');
            });
          })();
        </script>
      </li>

      <script type="text/partytown">
        (function () {
          document.body.classList.add('completed');
        })();
      </script>
    </ul>

    <hr />
    <p><a href="/tests/platform/history/">Reset</a></p>
    <p><a href="/tests/">All Tests</a></p>
  </body>
</html>
